<template>
  <div class="app-container calendar-list-container">
    <div v-if="visible">
      <el-form :model="entity" :rules="dataRule" ref="entity" label-width="80px" size="small">
        <el-row>
          <el-col :span="6">
            <el-form-item label="对账单" prop="billNo">
              <el-input v-model="entity.billNo" placeholder="对账单" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户名称">
              <el-input v-model="customerName" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="金额" prop="amount">
              <el-input v-model="entity.amount" type="number" placeholder="金额" :disabled="view"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="银行账号" prop="bankCode">
              <el-input v-model="entity.bankCode" type="text" placeholder="银行账号" :disabled="view"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="开户行" prop="backName">
              <el-input v-model="entity.backName" type="text" placeholder="开户行" :disabled="view"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item :label="typeName" prop="backUser">
              <el-input v-model="entity.backUser" type="text" :placeholder="typeName" :disabled="view"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="payTimeLabel" prop="payTime">
              <el-date-picker v-model="entity.payTime" type="date" :placeholder="payTimeLabel" :disabled="view"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="entity.remark" type="textarea" placeholder="备注" :disabled="view" :rows="3"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="附件">
              <el-upload class="upload-demo" :action="uplaodFileUrl" :on-success="fileSuccess" :on-remove="fileRemove" :file-list="fileList" list-type="picture" accept="image/*">
                <el-button size="small" type="primary">点击上传</el-button>
                <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <div class="dialog-footer-div">
          <el-button @click="cancel()">取消</el-button>
          <el-button v-if="!view" type="primary" @click="submit()">确定</el-button>
        </div>
      </span>
    </div>
  </div>
</template>

<script>
import request from '@/router/axios'
import url from '@/const/apiURL'
import { Message, MessageBox } from 'element-ui'


export default {
  data () {
    return {
      view: false,
      uplaodFileUrl: url.UPLOAD_FILE_URL,
      fileList: [],
      typeName: '名称',
      payTimeLabel: '',
      url: '',
      entity: {
        modelName: '',
        name: '',
        barCode: '',
        files: []
      },
      dataRule: {
        amount: [
          { required: true, message: '金额不能为空', trigger: 'blur' }
        ],
        payTime: [
          { required: true, message: '时间不能为空', trigger: 'blur' }
        ],
      }
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: function () {
        return false
      }
    }
  },
  methods: {
    init (title, entity, view, url) {
      this.$nextTick(() => {
        this.title = title
        this.$refs['entity'].resetFields()
        this.view = view
        this.entity = entity
        this.entity.files = []
        this.url = url
      })
    },
    initLabel (customerName, typeName, payTimeLabel) {
      this.$nextTick(() => {
        this.customerName = customerName
        this.typeName = typeName
        this.payTimeLabel = payTimeLabel
      })
    },
    fileSuccess (data) {
      if (data.success) {
        let file = data.data
        this.entity.files.push({ fileName: file.fileName, fileUrl: file.fileUrl })
      } else {
        MessageBox.alert(data.msg)
      }
    },
    fileRemove (file, fileList) {
      this.entity.files = []
      if (fileList) {
        fileList.forEach(f => {
          this.entity.files.push({ fileName: f.name, fileUrl: f.response.data.fileUrl })
        });
      }
    },
    cancel () {
      this.$emit('cancel')
    },
    submit () {
      this.$refs['entity'].validate((valid) => {
        if (valid) {
          this.handleUrl(this.entity).then((data) => {
            if (data) {
              this.$emit('cancel')
            }
          })
        }
      })
    },
    handleUrl (data) {
      return request({
        url: this.url,
        method: 'post',
        data
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
